/**
 * Created by 30947 on 2018/7/18.
 */
// script.js  


$(function () {
  char1()
})

var gender = function (res) {
  var myChart = echarts.init(document.getElementById("gy-tbody"));
  var option = {
    color: ['#80FFA5', '#00DDFF'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      legend: {
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
      },
      yAxis: {
          type: 'category',
          data: ['深圳', '苏州', '广州', '杭州', '南京'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
      },
      series: [
          {
              name: '2017',
              type: 'bar',
              data: [
                  { value: res[0].c2014, name: res[0].id },
                  { value: res[1].c2014, name: res[1].id },
                  { value: res[2].c2014, name: res[2].id },
                  { value: res[3].c2014, name: res[3].id },
                  { value: res[4].c2014, name: res[4].id }
              ]
          },
          {
              name: '2014',
              type: 'bar',
              data: [
                  { value: res[0].c2017, name: res[0].id },
                  { value: res[1].c2017, name: res[1].id },
                  { value: res[2].c2017, name: res[2].id },
                  { value: res[3].c2017, name: res[3].id },
                  { value: res[4].c2017, name: res[4].id }
              ]
          }
      ]
  };
  myChart.setOption(option);
}
$.ajax({
  url: '/eval',
  method: 'POST',
  data: {
      sql: 'select * from ads_o3_gy;'
  },

  success: gender
});
function showTable1(type) {
  var gy = document.getElementById('gy');
  var ran = document.getElementById('ran');
  var lj = document.getElementById('lj');
  if (type === 'gy') {
      gy.style.display = 'block';
      ran.style.display = 'none';
      lj.style.display = 'none';
  } else if (type === 'ran') {
      gy.style.display = 'none';
      ran.style.display = 'block';
      lj.style.display = 'none';
  } else if (type === 'lj') {
      gy.style.display = 'none';
      ran.style.display = 'none';
      lj.style.display = 'block';
  }
}
$(document).ready(function () {
  showTable1('gy');
});
var gender = function (res) {
  var myChart = echarts.init(document.getElementById("lj-tbody"));
  var option = {
    color: ['#80FFA5', '#00DDFF'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      legend: {textStyle: {
        color: '#fff'
      }},
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
      },
      yAxis: {
          type: 'category',
          data: ['南京', '广州', '济南', '杭州', '福州'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
      },
      series: [
          {
              name: '2020',
              type: 'bar',
              data: [
                  { value: res[0].c2016, name: res[0].id },
                  { value: res[1].c2016, name: res[1].id },
                  { value: res[2].c2016, name: res[2].id },
                  { value: res[3].c2016, name: res[3].id },
                  { value: res[4].c2016, name: res[4].id }
              ]
          },
          {
              name: '2016',
              type: 'bar',
              data: [
                  { value: res[0].c2020, name: res[0].id },
                  { value: res[1].c2020, name: res[1].id },
                  { value: res[2].c2020, name: res[2].id },
                  { value: res[3].c2020, name: res[3].id },
                  { value: res[4].c2020, name: res[4].id }
              ]
          }
      ]
  };
  myChart.setOption(option);
}
$.ajax({
  url: '/eval',
  method: 'POST',
  data: {
      sql: 'select * from ads_o3_lj;'
  },

  success: gender
});
var gender = function (res) {
  var myChart = echarts.init(document.getElementById("ran-tbody"));
  var option = {
    color: ['#80FFA5', '#00DDFF'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      legend: {textStyle: {
        color: '#fff'
      }},
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
      },
      yAxis: {
          type: 'category',
          data: ['呼和浩特', '哈尔滨', '济南', '沈阳', '石家庄'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
      },
      series: [
          {
              name: '2021',
              type: 'bar',
              data: [
                  { value: res[0].c2017, name: res[0].id },
                  { value: res[1].c2017, name: res[1].id },
                  { value: res[2].c2017, name: res[2].id },
                  { value: res[3].c2017, name: res[3].id },
                  { value: res[4].c2017, name: res[4].id }
              ]
          },
          {
              name: '2017',
              type: 'bar',
              data: [
                  { value: res[0].c2021, name: res[0].id },
                  { value: res[1].c2021, name: res[1].id },
                  { value: res[2].c2021, name: res[2].id },
                  { value: res[3].c2021, name: res[3].id },
                  { value: res[4].c2021, name: res[4].id }
              ]
          }
      ]
  };
  myChart.setOption(option);
}
$.ajax({
  url: '/eval',
  method: 'POST',
  data: {
      sql: 'select * from ads_o3_ran;'
  },

  success: gender
});
// 统计分析图
function char1() {
  var char1 = function (res) {
    var myChart = echarts.init(document.getElementById("char1"));
    var option = {

      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        top: '5%',
        left: 'center',
        textStyle: {
          color: "white"
        }
      },
      series: [
        {
          color: [
            '#69BE48',
            '#12AECF',
            '#33449C',
            '#E9255D',
            '#F7901F',
            '#F9E72A'
          ],
          name: '污染成分:',
          type: 'pie',
          radius: ['30%', '70%'],
          center: ['50%', '60%'],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 20,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true, // 开启标签显示  
            // position: 'center',
          },

          labelLine: {
            show: true
          },
          data: [
            { value: res[0].proportion, name: res[0].type },
            { value: res[1].proportion, name: res[1].type },
            { value: res[2].proportion, name: res[2].type },
            { value: res[3].proportion, name: res[3].type },
            { value: res[4].proportion, name: res[4].type },
            { value: res[5].proportion, name: res[5].type },
          ]
        }
      ]
    };
    myChart.setOption(option);
   

  }
  $.ajax({
    url: '/eval',
    method: 'POST',
    data: {
      sql: 'select * from ads_gas_proportion;'
    },

    success: char1
  });
}


function char3() {
  var myChart = echarts.init($('#char3')[0])

  option = {
    legend: {
      data: [''],
      textStyle: {
        color: '#ffffff'
      }
    },
    grid: { show: 'true', borderWidth: '0' },

    calculable: false,
    tooltip: {
      trigger: 'axis',
      formatter: 'Temperature : <br/>{b} : {c}°C'
    },
    xAxis: [
      {
        type: 'value',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#fff'
          }
        },

        splitLine: {
          lineStyle: {
            width: 0,
            type: 'solid'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'category',
        axisLine: { onZero: false },
        axisLabel: {
          formatter: '{value} ',
          textStyle: {
            color: '#fff'
          }
        },
        splitLine: {
          lineStyle: {
            width: 0,
            type: 'solid'
          }
        },
        boundaryGap: false,
        data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
      }
    ],
    series: [
      {
        name: '',
        type: 'line',
        smooth: true,
        itemStyle: {
          normal: {
            lineStyle: {
              shadowColor: 'rgba(0,0,0,0.4)'
            }
          }
        },
        data: [15, 0, 20, 45, 22.1, 25, 70, 55, 76]
      }
    ]
  }

  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
  myChart.on('click', function (param) {
    setTimeout(function () {
      location.href = ''
    }, 20000)
  })
}



// 图片轮播函数 - 针对带有 .slide-image 类的图片  
function slideShow() {
  // 移除当前图片的激活状态    
  images[currentIndex].classList.remove('active');
  // 更新索引    
  currentIndex = (currentIndex + 1) % imageCount;
  // 添加新图片的激活状态    
  images[currentIndex].classList.add('active');
}

// 获取所有 .slide-image 类的图片元素  
var images = document.querySelectorAll('.slide-image');
var currentIndex = 0; // 当前显示的图片索引    
var imageCount = images.length; // 图片总数    
// 初始设置第一张图片为活动图片    
images[currentIndex].classList.add('active');
// 每3秒切换图片    
setInterval(slideShow, 3000);

// 图片轮播函数 - 针对带有 .slide-image1 类的图片  
function slideShow1() {
  // 移除当前图片的激活状态    
  images1[currentIndex1].classList.remove('active');
  // 更新索引    
  currentIndex1 = (currentIndex1 + 1) % imageCount1;
  // 添加新图片的激活状态    
  images1[currentIndex1].classList.add('active');
}

// 获取所有 .slide-image1 类的图片元素  
var images1 = document.querySelectorAll('.slide-image1');
var currentIndex1 = 0; // 当前显示的图片索引    
var imageCount1 = images1.length; // 图片总数    
// 初始设置第一张图片为活动图片    
images1[currentIndex1].classList.add('active');
// 每3秒切换图片    
setInterval(slideShow1, 3000);

var gender = function (res) {
  var myChart = echarts.init(document.getElementById("hf-tbody"));
  var option = {
      grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          containLabel: true
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      legend: {
          textStyle: {
            color: 'white'
          },
          grid: {
              left: '3%',
              bottom: '3%',
              containLabel: true
          }
      },
      yAxis: [{
          type: 'value',
          splitLine: {
              lineStyle: {
                  color: "rgba(255,255,255,.1)",
              }
          },
          axisLabel: {
              textStyle: {
                color: 'white' // 设置字体颜色为白色
              }
          },
      }],
      xAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                color: 'white'// 设置字体颜色为白色
              }
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      series: [

          {
              name: '2014',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 6,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(217,255,0,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(255,191,0,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[0].合肥, name: res[0].year },
                  { value: res[1].合肥, name: res[1].year },
                  { value: res[2].合肥, name: res[2].year },
                  { value: res[3].合肥, name: res[3].year },
                  { value: res[4].合肥, name: res[4].year },
                  { value: res[5].合肥, name: res[5].year },
                  { value: res[6].合肥, name: res[6].year },
                  { value: res[7].合肥, name: res[7].year },
                  { value: res[8].合肥, name: res[8].year },
                  { value: res[9].合肥, name: res[9].year },
                  { value: res[10].合肥, name: res[10].year },
                  { value: res[11].合肥, name: res[11].year },
              ]
          },
          {
              name: '2021',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 7,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(0,225,255,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(0,255,196,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[12].合肥, name: res[12].year },
                  { value: res[13].合肥, name: res[13].year },
                  { value: res[14].合肥, name: res[14].year },
                  { value: res[15].合肥, name: res[15].year },
                  { value: res[16].合肥, name: res[16].year },
                  { value: res[17].合肥, name: res[17].year },
                  { value: res[18].合肥, name: res[18].year },
                  { value: res[19].合肥, name: res[19].year },
                  { value: res[20].合肥, name: res[20].year },
                  { value: res[21].合肥, name: res[21].year },
                  { value: res[22].合肥, name: res[22].year },
                  { value: res[23].合肥, name: res[23].year },
              ]
          }
      ]
  };
  myChart.setOption(option);
  let lastIndex = 0;
  let currentIndex = 0;
  setInterval(() => {
      myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: lastIndex,
      });
      myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      lastIndex = currentIndex;
      ++currentIndex;
      if (currentIndex > 12) {
          currentIndex = 0;
      }
  }, 1000);

}
$.ajax({
  url: '/eval',
  method: 'POST',
  data: {
      sql: 'select * from ads_pm25_wu;',
  },

  success: gender
});

function showTable(type) {
  var bj = document.getElementById('bj');
  var tj = document.getElementById('tj');
  var sjz = document.getElementById('sjz');
  var nj = document.getElementById('nj');
  var hf = document.getElementById('hf');
  if (type === 'bj') {
      bj.style.display = 'block';
      tj.style.display = 'none';
      sjz.style.display = 'none';
      nj.style.display = 'none';
      hf.style.display = 'none';
  } else if (type === 'tj') {
      bj.style.display = 'none';
      tj.style.display = 'block';
      sjz.style.display = 'none';
      nj.style.display = 'none';
      hf.style.display = 'none';
  } else if (type === 'sjz') {
      bj.style.display = 'none';
      tj.style.display = 'none';
      sjz.style.display = 'block';
      nj.style.display = 'none';
      hf.style.display = 'none';
  } else if (type === 'nj') {
      bj.style.display = 'none';
      tj.style.display = 'none';
      sjz.style.display = 'none';
      nj.style.display = 'block';
      hf.style.display = 'none';
  } else if (type === 'hf') {
      bj.style.display = 'none';
      tj.style.display = 'none';
      sjz.style.display = 'none';
      nj.style.display = 'none';
      hf.style.display = 'block';
  }
}
$(document).ready(function () {
  showTable('bj');
});

var gender = function (res) {
  var myChart = echarts.init(document.getElementById("bj-tbody"));
  var option = {
      grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          containLabel: true
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      legend: {
          textStyle: {
            color: 'white'
          },
          grid: {
              left: '3%',
              bottom: '3%',
              containLabel: true
          }
      },
      yAxis: [{
          type: 'value',
          splitLine: {
              lineStyle: {
                  color: "rgba(255,255,255,.1)",
              }
          },
          axisLabel: {
              textStyle: {
                color: 'white'// 设置字体颜色为白色
              }
          },
      }],
      xAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                color: 'white' // 设置字体颜色为白色
              }
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      series: [

          {
              name: '2014',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 6,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(217,255,0,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(255,191,0,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[0].北京, name: res[0].year },
                  { value: res[1].北京, name: res[1].year },
                  { value: res[2].北京, name: res[2].year },
                  { value: res[3].北京, name: res[3].year },
                  { value: res[4].北京, name: res[4].year },
                  { value: res[5].北京, name: res[5].year },
                  { value: res[6].北京, name: res[6].year },
                  { value: res[7].北京, name: res[7].year },
                  { value: res[8].北京, name: res[8].year },
                  { value: res[9].北京, name: res[9].year },
                  { value: res[10].北京, name: res[10].year },
                  { value: res[11].北京, name: res[11].year },
              ]
          },
          {
              name: '2021',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 7,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(0,225,255,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(0,255,196,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[12].北京, name: res[12].year },
                  { value: res[13].北京, name: res[13].year },
                  { value: res[14].北京, name: res[14].year },
                  { value: res[15].北京, name: res[15].year },
                  { value: res[16].北京, name: res[16].year },
                  { value: res[17].北京, name: res[17].year },
                  { value: res[18].北京, name: res[18].year },
                  { value: res[19].北京, name: res[19].year },
                  { value: res[20].北京, name: res[20].year },
                  { value: res[21].北京, name: res[21].year },
                  { value: res[22].北京, name: res[22].year },
                  { value: res[23].北京, name: res[23].year },
              ]
          }
      ]
  };
  myChart.setOption(option);
  let lastIndex = 0;
  let currentIndex = 0;
  setInterval(() => {
      myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: lastIndex,
      });
      myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      lastIndex = currentIndex;
      ++currentIndex;
      if (currentIndex > 12) {
          currentIndex = 0;
      }
  }, 1000);

}
$.ajax({
  url: '/eval',
  method: 'POST',
  data: {
      sql: 'select * from ads_pm25_wu;',
  },

  success: gender
});

var gender = function (res) {
  var myChart = echarts.init(document.getElementById("tj-tbody"));
  var option = {
      grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          containLabel: true
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      legend: {
          textStyle: {
            color: 'white'
          },
          grid: {
              left: '3%',
              bottom: '3%',
              containLabel: true
          }
      },
      yAxis: [{
          type: 'value',
          splitLine: {
              lineStyle: {
                  color: "rgba(255,255,255,.1)",
              }
          },
          axisLabel: {
              textStyle: {
                color: 'white'// 设置字体颜色为白色
              }
          },
      }],
      xAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                color: 'white' // 设置字体颜色为白色
              }
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      series: [

          {
              name: '2014',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 6,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(217,255,0,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(255,191,0,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[0].天津, name: res[0].year },
                  { value: res[1].天津, name: res[1].year },
                  { value: res[2].天津, name: res[2].year },
                  { value: res[3].天津, name: res[3].year },
                  { value: res[4].天津, name: res[4].year },
                  { value: res[5].天津, name: res[5].year },
                  { value: res[6].天津, name: res[6].year },
                  { value: res[7].天津, name: res[7].year },
                  { value: res[8].天津, name: res[8].year },
                  { value: res[9].天津, name: res[9].year },
                  { value: res[10].天津, name: res[10].year },
                  { value: res[11].天津, name: res[11].year },
              ]
          },
          {
              name: '2021',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 7,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(0,225,255,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(0,255,196,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[12].天津, name: res[12].year },
                  { value: res[13].天津, name: res[13].year },
                  { value: res[14].天津, name: res[14].year },
                  { value: res[15].天津, name: res[15].year },
                  { value: res[16].天津, name: res[16].year },
                  { value: res[17].天津, name: res[17].year },
                  { value: res[18].天津, name: res[18].year },
                  { value: res[19].天津, name: res[19].year },
                  { value: res[20].天津, name: res[20].year },
                  { value: res[21].天津, name: res[21].year },
                  { value: res[22].天津, name: res[22].year },
                  { value: res[23].天津, name: res[23].year },
              ]
          }
      ]
  };
  myChart.setOption(option);
  let lastIndex = 0;
  let currentIndex = 0;
  setInterval(() => {
      myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: lastIndex,
      });
      myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      lastIndex = currentIndex;
      ++currentIndex;
      if (currentIndex > 12) {
          currentIndex = 0;
      }
  }, 1000);

}
$.ajax({
  url: '/eval',
  method: 'POST',
  data: {
      sql: 'select * from ads_pm25_wu;',
  },

  success: gender
});

var gender = function (res) {
  var myChart = echarts.init(document.getElementById("sjz-tbody"));
  var option = {
      grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          containLabel: true
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      legend: {
          textStyle: {
            color: 'white'
          },
          grid: {
              left: '3%',
              bottom: '3%',
              containLabel: true
          }
      },
      yAxis: [{
          type: 'value',
          splitLine: {
              lineStyle: {
                  color: "rgba(255,255,255,.1)",
              }
          },
          axisLabel: {
              textStyle: {
                color: 'white' // 设置字体颜色为白色
              }
          },
      }],
      xAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                color: 'white' // 设置字体颜色为白色
              }
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      series: [

          {
              name: '2014',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 6,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(217,255,0,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(255,191,0,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[0].石家庄, name: res[0].year },
                  { value: res[1].石家庄, name: res[1].year },
                  { value: res[2].石家庄, name: res[2].year },
                  { value: res[3].石家庄, name: res[3].year },
                  { value: res[4].石家庄, name: res[4].year },
                  { value: res[5].石家庄, name: res[5].year },
                  { value: res[6].石家庄, name: res[6].year },
                  { value: res[7].石家庄, name: res[7].year },
                  { value: res[8].石家庄, name: res[8].year },
                  { value: res[9].石家庄, name: res[9].year },
                  { value: res[10].石家庄, name: res[10].year },
                  { value: res[11].石家庄, name: res[11].year },
              ]
          },
          {
              name: '2021',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 7,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(0,225,255,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(0,255,196,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[12].石家庄, name: res[12].year },
                  { value: res[13].石家庄, name: res[13].year },
                  { value: res[14].石家庄, name: res[14].year },
                  { value: res[15].石家庄, name: res[15].year },
                  { value: res[16].石家庄, name: res[16].year },
                  { value: res[17].石家庄, name: res[17].year },
                  { value: res[18].石家庄, name: res[18].year },
                  { value: res[19].石家庄, name: res[19].year },
                  { value: res[20].石家庄, name: res[20].year },
                  { value: res[21].石家庄, name: res[21].year },
                  { value: res[22].石家庄, name: res[22].year },
                  { value: res[23].石家庄, name: res[23].year },
              ]
          }
      ]
  };
  myChart.setOption(option);
  let lastIndex = 0;
  let currentIndex = 0;
  setInterval(() => {
      myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: lastIndex,
      });
      myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      lastIndex = currentIndex;
      ++currentIndex;
      if (currentIndex > 12) {
          currentIndex = 0;
      }
  }, 1000);

}
$.ajax({
  url: '/eval',
  method: 'POST',
  data: {
      sql: 'select * from ads_pm25_wu;',
  },

  success: gender
});

var gender = function (res) {
  var myChart = echarts.init(document.getElementById("nj-tbody"));
  var option = {
      grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          containLabel: true
      },
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      legend: {
          textStyle: {
              color: 'white'
          },
          grid: {
              left: '3%',
              bottom: '3%',
              containLabel: true
          }
      },
      yAxis: [{
          type: 'value',
          splitLine: {
              lineStyle: {
                  color: "rgba(255,255,255,.1)",
              }
          },
          axisLabel: {
              textStyle: {
                  color: 'white' // 设置字体颜色为白色
              }
          },
      }],
      xAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                  color: 'white' // 设置字体颜色为白色
              }
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      series: [

          {
              name: '2014',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 6,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(217,255,0,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(255,191,0,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[0].南京, name: res[0].year },
                  { value: res[1].南京, name: res[1].year },
                  { value: res[2].南京, name: res[2].year },
                  { value: res[3].南京, name: res[3].year },
                  { value: res[4].南京, name: res[4].year },
                  { value: res[5].南京, name: res[5].year },
                  { value: res[6].南京, name: res[6].year },
                  { value: res[7].南京, name: res[7].year },
                  { value: res[8].南京, name: res[8].year },
                  { value: res[9].南京, name: res[9].year },
                  { value: res[10].南京, name: res[10].year },
                  { value: res[11].南京, name: res[11].year },
              ]
          },
          {
              name: '2021',
              type: 'bar',
              barWidth: '35%',
              itemStyle: {
                  // 修改柱子圆角,可以修改不同大小值，看圆角效果
                  barBorderRadius: 7,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: 'rgba(0,225,255,0.98)' // 红色渐变
                  }, {
                      offset: 1,
                      color: 'rgba(0,255,196,0.97)' // 蓝色渐变
                  }])
              },
              data: [
                  { value: res[12].南京, name: res[12].year },
                  { value: res[13].南京, name: res[13].year },
                  { value: res[14].南京, name: res[14].year },
                  { value: res[15].南京, name: res[15].year },
                  { value: res[16].南京, name: res[16].year },
                  { value: res[17].南京, name: res[17].year },
                  { value: res[18].南京, name: res[18].year },
                  { value: res[19].南京, name: res[19].year },
                  { value: res[20].南京, name: res[20].year },
                  { value: res[21].南京, name: res[21].year },
                  { value: res[22].南京, name: res[22].year },
                  { value: res[23].南京, name: res[23].year },
              ]
          }
      ]
  };
  myChart.setOption(option);
  let lastIndex = 0;
  let currentIndex = 0;
  setInterval(() => {
      myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: lastIndex,
      });
      myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex,
      });
      lastIndex = currentIndex;
      ++currentIndex;
      if (currentIndex > 12) {
          currentIndex = 0;
      }
  }, 1000);

}
$.ajax({
  url: '/eval',
  method: 'POST',
  data: {
      sql: 'select * from ads_pm25_wu;',
  },

  success: gender
});